<script setup lang="ts">
import useHomeStore from "@/store/home";
import {ref} from "vue";

const homeStore = useHomeStore();
homeStore.getHosRegionData("Beijin")


const $emits = defineEmits(["handlerRegion"]);

const defaultActive = ref('')

const handlerHeightShow = (value: string) => {
  defaultActive.value = value

  //事件触发
  $emits("handlerRegion",value)
}

</script>

<template>
  <div class="region">
    <div class="content">
      <div class="left">
        地区:
      </div>
      <div class="right">
        <span class="item" :class="{active: defaultActive===''}" @click="handlerHeightShow('')">全部</span>
        <template v-for="(item,index) in homeStore.hosRegion" :key="index">
          <span class="item" :class="{active:defaultActive===item.value}"
                @click="handlerHeightShow(item.value)">{{ item.name }}</span>
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.region {
  color: #808080;

  .content {
    display: flex;
    margin-top: 20px;


    .left {
      width: 44px;
    }

    .right {
      display: flex;
      flex-wrap: wrap;
      margin-left: 10px;

      span {
        margin-left: 10px;
        padding-bottom: 15px;

        &.item:hover {
          cursor: pointer;
          color: red;
        }

        &.active {
          color: red;
        }
      }


    }
  }
}
</style>
